<template>
<d2-container>
  <template slot="header">追溯查询页面</template>
  <h3>原材料追溯：</h3>
  <div class="block" >
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(item,index) in materialData" :title="item.alias" :name="index">
        <div>{{item.supplier}}</div>
        <div>{{item.remark}}</div>
      </el-collapse-item>
    </el-collapse>
  </div>
  <h3>生产流通追溯：</h3>
  <div class="block">
    <el-timeline>
      <el-timeline-item v-for="item in logisticsData" :timestamp="item.createTime.replace('T',' ').slice(0,19)"
                        placement="top">
        <el-card>
          <h4>标题：{{ item.type }}</h4>
          <p>内容：{{ item.content }} <br> 操作员：{{ item.operationPerson }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</d2-container>
</template>

<script>
import {request} from "@/network/request";

const axios = require('axios');
export default {
  name: 'trace',
  created() {
    const _this = this;

    request({
      url: 'trace/query',
      method: '',
      params: {
        productId: '317a02441ca5429791',
      }
    }, res => {
      console.log(res);
      _this.logisticsData = res.data.data.logistics;
      _this.materialData = res.data.data.material;
    })
  },
  data() {
    return {
      logisticsData: null,
      materialData: null,
      activeName:"1"
    }
  }
}
</script>
